Row PropertiesColumn span

Description

The Column span property only works with columnar grids when the Number of 'Layout' Columns , found in the Layout Options portion of the grid Properties page, is set to a value greater than one. Changing the Column span value of a control helps position that control inside a grid or UX component. This is often achieved in concert with other layout properties such as the Number of "Layout" columns and the Repeating columns property.

Using Column span for Control Positioning:

  1. In the Grid Builder go to the Design tab and open the Component Type page. In the Grid Layout menu select a Form (Columnar) grid.

    images/01_colspan.png
  2. Open the Data Source page and select either .dbf or SQL as a data source.

  3. Click on the Query(DBF) or Query(AlphaDAO) page and connect to the table that you will pull data from. Click Select Primary Key and choose a field you will use.

  4. Open the Fields page. Move 6 fields from the Available Fields: list into the Selected: fields list using the arrow buttons.

    images/01_colspan2.png
  5. Now go to the grid Properties page . In the Layout Options section find the Number of 'Layout' columns property and set it to 2.

    images/01_colspan3.png
  6. Find the Repeating columns property, also located under Layout Options, and set the Repeating columns property to be 3.

    images/01_colspan4.png
  7. Now go to Live Preview and see how the records on your grid look:

    images/01_colspan5.png
  8. Return to the Design tab and on the Fields page click on the first field control in your Selected: fields list.

  9. Go to the Row Properties section of the Field Propertie s list. Find the Column spanproperty and set its value to 2.

    images/01_colspan6.png
  10. Now go to Live Preview again. Notice how changing the column span for the first field pushes the other fields down.

    images/01_colspan7.png
  11. Go back to the Fields page. Select the fourth field in your Selected: fields list. Go to the Field Properties list and again find the Row Properties section. Set the Column spanvalue for this property to 2.

  12. Open the grid in Live Preview :

    images/01_colspan8.png